
//============= Candidate for iBrowse =================
iBrowse.captureMouse = function(el, ev, fnMove, fnUp) {
   if (document.addEventListener) {
       document.addEventListener("mousemove", fnMove, true);
       document.addEventListener("mouseup", fnUp, true);
   } else if (document.attachEvent) {
       el.setCapture();
       el.attachEvent("onmousemove", fnMove);
       el.attachEvent("onmouseup", fnUp);
       el.attachEvent("onlosecapture", fnUp);
   }
   iBrowse.stopPropagation(ev);
   if (ev.preventDefault) ev.preventDefault();
   else ev.returnValue = false;
};

iBrowse.stopPropagation = function(ev) {
   if (ev.stopPropagation) ev.stopPropagation();
   else ev.cancelBubble = true;
};

iBrowse.releaseCapture = function(el, ev, fnMove, fnUp) {
    if (document.removeEventListener) {
        document.removeEventListener("mouseup", fnUp, true);
        document.removeEventListener("mousemove", fnMove, true);
    } else if (document.detachEvent) {
        el.detachEvent("onlosecapture", fnUp);
        el.detachEvent("onmouseup", fnUp);
        el.detachEvent("onmousemove", fnMove);
        el.releaseCapture();
    }
};

//=====================================================

function getElementsByClassName(clssName, tag) {
    if (!tag) tag="*";
    var elements = document.getElementsByTagName(tag);
    var ret = [];
    for(var i=0; i<elements.length; i++){
        var element = elements[i];
        if(element.className == clssName){
            ret.push(element);
        }
    }
    return ret;
}

function dragOver()
{
    if (this.x_inactive) return;
    cursor.x_element = this;
    cursor.style.left = this.offsetLeft + "px";
    cursor.style.top = this.offsetTop + "px";
    cursor.style.visibility = "visible";
}

function dragOut()
{
    cursor.style.visibility = "hidden";
    cursor.x_element = null;
}

function dragStart(e)
{
    var self = cursor.x_element;
    if (!self) return;
    var style = self.style;
    var stuck;
    if (stuck = nearTarget(self.offsetLeft, self.offsetTop)) {
        stuck.x_stuck = null;
        stuck = null;
    }
    style.zIndex = 2;
    iBrowse.setOpacity(self, 0.5);
    if (!e) e = window.event;
    var dx = e.clientX - self.offsetLeft;
    var dy = e.clientY - self.offsetTop;
    iBrowse.captureMouse(cursor, e, dragMove, dragUp);

    function dragUp(e)
    {
        if (!e) e = window.event;
        style.zIndex = 1;
        iBrowse.setOpacity(self, 1.0);
        if (stuck) {
            var org;
            if (org=stuck.x_stuck) {
                anime.add({ element:org, x:org.x_sx, y:org.x_sy, 
                            effect:'elastic', duration:600 });
            }
            stuck.x_stuck = self;
            cursor.style.left = self.offsetLeft + "px";
            cursor.style.top = self.offsetTop + "px";
        } else {
            self.x_inactive = true;
            cursor.style.left = -20 + "px";
            cursor.style.top = 0 + "px";
            cursor.style.visibility = "hidden";
            cursor.x_element = null;
            anime.add({ element:self, x:self.x_sx, y:self.x_sy, 
                        effect:'elastic', duration:600,
                        onComplete:function() {self.x_inactive=false;} });
        }
        iBrowse.releaseCapture(cursor, e, dragMove, dragUp);
        iBrowse.stopPropagation(e);
    }

    function dragMove(e)
    {
        if (!e) e = window.event;
        var x = e.clientX - dx;
        var y = e.clientY - dy;
        cursor.style.left = x + "px";
        cursor.style.top = y + "px";
        if (stuck = nearTarget(x,y)) {
            x = stuck.x; y = stuck.y;
        }
        iBrowse.setOpacity(self, stuck ? 1.0 : 0.5);
        style.left = x + "px";
        style.top = y + "px";
        iBrowse.stopPropagation(e);
    }
}

function nearTarget(x, y)
{
    for (var i=0; i<targets.length; i++) {
        var t = targets[i];
        var fx = x - t.x;
        var fy = y - t.y;
        var d2 = fx*fx + fy*fy;
        if (d2 < 16*16) {
            x = t.x;
            y = t.y;
            return t;
        } 
    }
    return null;
}

var targets = [];
var cursor;

function init()
{
    var style;
    //
    cursor = document.getElementById("cursor");
    cursor.onmouseout = dragOut;
    cursor.onmousedown = dragStart;
 
    //
    var elements = getElementsByClassName("dragme");
    for (var i=0; i<elements.length; i++) {
        var element = elements[i];
        element.onmouseover = dragOver;
        element.onmousemove = dragOver;
        element.onmousedown = function(e) {
            dragOver.call(this, e);
            dragStart.call(cursor, e);
        }
        // element.onmouseout = dragOut;
        // element.onmousedown = dragStart;
        style = element.style;
        element.x_sx = element.offsetLeft;
        element.x_sy = element.offsetTop;
//        style.position = "absolute";
//         style.left = element.x_sx + "px";
//        style.top = element.x_sy + "px";
    }

    elements = getElementsByClassName("darea");
    for (var i=0; i<elements.length; i++) {
        var element = elements[i];
        targets.push({x:element.offsetLeft, y:element.offsetTop});
    } 
}
